<template>
  <BdpLayout>
    <page-header type="customized">
      <a-space>
        <a-select
          v-model="databaseId"
          placeholder="请选择数据源"
          style="width: 150px; margin-right: 12px"
          @select="databaseSelect"
        >
          <a-select-option v-for="sort in databaseList" :key="sort.id" :value="sort.id">
            {{ sort.connectName }}
          </a-select-option>
        </a-select>
      </a-space>
    </page-header>
    <b-table
      :columns="columns"
      :data-source="tableData"
      :is-custom-row-click="false"
      :loading="loading"
      :pagination="pagination"
      style="height: calc(100% - 40px)"
      @change="handleTableChange"
    >
      <template #action="{ text, record }">
        <a-button type="link" @click="restoreCheckClick(record)"> 还原</a-button>
        <a-button type="link" @click="deleteFileClick(record)"> 删除</a-button>
      </template>
    </b-table>
    <dbRestoreModal
      v-if="restoreModalShow"
      ref="restoreModalRef"
      @close="closeRestoreModal"
      @success="databaseSelect"
    ></dbRestoreModal>
    <data-recovery-add
      v-if="visibleAddModal"
      :title="title"
      @close="visibleAddModal = false"
      @success="databaseSelect"
    ></data-recovery-add>
    <data-recovery-edit
      v-if="visibleEditModal"
      :record="record"
      :title="title"
      @close="visibleEditModal = false"
      @success="databaseSelect()"
    ></data-recovery-edit>
  </BdpLayout>
</template>

<script>
import dataRecoveryAdd from '@bdp/sl/dataSecurity/components/dataRecoveryAdd.vue';
import dataRecoveryEdit from '@bdp/sl/dataSecurity/components/dataRecoveryEdit.vue';
import DbRestoreModal from '@/pages/bdp/sl/dataSecurity/dbRestoreModal.vue';
import { dataRecoveryColumns } from '@bdp/sl/utils/columns';
import { deleteFile, getDatabase, getDbList, getFileList } from '@bdp/sl/dataSecurity/api';
import { VXETable } from 'vxe-table/lib/v-x-e-table';

export default {
  name: 'dataBackup',
  components: { dataRecoveryAdd, dataRecoveryEdit, DbRestoreModal },
  data() {
    return {
      databaseList: [],
      databaseId: '',
      restoreModalShow: false,
      visibleAddModal: false,
      visibleEditModal: false,
      loading: false,
      title: '',
      keywords: '',
      record: {},
      columns: Object.freeze(dataRecoveryColumns),
      tableData: [],
      statusList: [
        {
          dictKey: '10',
          dictValue: '等待中',
        },
        {
          dictKey: '21',
          dictValue: '终止中',
        },
        {
          dictKey: '30',
          dictValue: '已终止',
        },
        {
          dictKey: '20',
          dictValue: '运行中',
        },
        {
          dictKey: '40',
          dictValue: '已结束',
        },
        {
          dictKey: '-1',
          dictValue: '未知状态',
        },
        {
          dictKey: '99',
          dictValue: '异常停止',
        },
      ],
      pagination: {
        current: 1,
        pageSize: 20,
        total: 0,
      },
    };
  },
  created() {
    getDbList().then((e) => {
      this.databaseList = e.data;
    });
  },
  methods: {
    closeRestoreModal() {
      this.restoreModalShow = false;
      this.getDbList();
    },
    // 删除文件
    async deleteFileClick(row) {
      const type = await VXETable.modal.confirm(`您确认要删除${row.fileName}吗？`);
      if (type === 'confirm') {
        deleteFile(row).then((res) => {
          VXETable.modal.message({ content: '删除成功', status: 'success' });
          this.databaseSelect();
        });
      }
    },
    restoreCheckClick(row) {
      this.restoreModalShow = true;
      this.$nextTick(() => {
        this.$refs.restoreModalRef.init(row);
      });
    },
    databaseSelect() {
      getFileList(this.databaseId).then((e) => {
        getDatabase(this.databaseId).then((er) => {
          this.tableData = e.data;
          this.tableData.forEach((item) => {
            item.dbName = er.data.dbName;
            item.dbType = er.data.dbType;
            item.targetId = er.data.id;
            item.targetDbName = er.data.dbName;
            item.host = er.data.host + ':' + er.data.port;
            item.connectName = er.data.connectName;
          });
          console.log(this.tableData);
        });
      });
    },
    formatStatus(val) {
      let obj = this.statusList.find((item) => item.dictKey === val);
      if (obj) {
        return obj.dictValue;
      } else {
        return '--';
      }
    },
    /* 获取采集任务列表 */
    async fetchData(unloading) {
      this.loading = !unloading;
      const params = {
        currentPage: this.pagination.current,
        pageSize: this.pagination.pageSize,
        acquisitionName: this.keywords,
      };
      // const { code, data } = await getDeviceAcquisitionByPage(params);
      // this.loading = false;
      // if (code === 0) {
      // 	this.pagination.total = data.total;
      // 	this.tableData = data.list;
      // }
    },
    /* 表格翻页 */
    handleTableChange({ pagination }) {
      this.pagination = pagination;
      this.fetchData();
    },
    /* 条件搜索 */
    onSearch(keywords) {
      this.keywords = keywords;
      this.pagination.current = 1;
      this.fetchData();
    },
    /* 新增作业 */
    handleTaskAdd() {
      this.title = '新增';
      this.visibleAddModal = true;
    },
    /* 编辑作业 */
    handleTaskEdit(row) {},
    handleTaskDel(row) {
      let _this = this;
      this.$confirm({
        title: '确认要删除选择的数据吗?',
        content: '',
        okText: '确定',
        cancelText: '取消',
        onOk() {
          // deleteDeviceAcquisition(row.id)
          // 	.then((response) => {
          // 		console.log(response);
          // 		if (response.code === 0) {
          // 			_this.fetchData();
          // 		} else {
          // 			_this.$message.warning('删除失败');
          // 		}
          // 	})
          // 	.catch((e) => {
          // 		console.error('删除失败：', e);
          // 	});
        },
        onCancel() {},
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
